<template>
    <div class="filter-container card">
        <div class="filter-bar">
            <el-form :inline="true" :model="filterForm" class="filter-form">
                <el-form-item label="会议日期">
                    <el-date-picker @change="handleFilter" v-model="filterForm.dateRange" type="daterange"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item label="项目名称">
                    <el-input @keyup.enter="handleFilter" v-model="filterForm.projectName" placeholder="请输入项目名称"
                        clearable />
                </el-form-item>
                <el-form-item label="会议发起人">
                    <el-input @keyup.enter="handleFilter" v-model="filterForm.meetingName" placeholder="会议发起人" clearable />
                </el-form-item>
                <el-form-item label="会议参与人">
                    <el-input @keyup.enter="handleFilter" v-model="filterForm.organizer" placeholder="会议参与人" clearable />
                </el-form-item>
            </el-form>
            <div class="filter-actions">
                <el-button type="primary" @click="handleAdd">
                    <el-icon>
                        <plus />
                    </el-icon>新增会议
                </el-button>
                <el-button type="success" @click="exportExcel">
                    <el-icon>
                        <document />
                    </el-icon>导出Excel
                </el-button>
            </div>
        </div>
    </div>

    <div class="table-card card">
                 <el-table :data="tableData" border v-loading="loading" stripe highlight-current-row size="small" row-key="ID">
             <el-table-column prop="meetingDate" label="会议日期" width="100" align="center" />
             <el-table-column prop="itemName" label="项目名称" width="120" align="center" :show-overflow-tooltip="true" />
             <el-table-column prop="meetingName" label="会议名称" :show-overflow-tooltip="true" min-width="180">
                <template #default="{ row }">
                    <div class="meeting-name-container">
                        <span :class="{ 'auto-created': row.isAutoCreated === 1, 'not-effective': row.isEffective !== 1 }">
                            {{ row.meetingName }}
                        </span>
                        <div class="meeting-status-indicators">
                            <el-tag v-if="row.isAutoCreated === 1" size="small" type="success" class="status-tag">
                                系统创建
                            </el-tag>
                            <el-tag v-if="row.isEffective !== 1" size="small" type="danger" class="status-tag">
                                未生效
                            </el-tag>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="userName" label="归属人" width="100" align="center" />
                         <el-table-column prop="meetingType" label="会议类型" width="100" align="center">
                 <template #default="{ row }">
                     <el-tag :type="getMeetingTypeTagType(row.meetingType)" size="small">
                         {{ getMeetingTypeLabel(row.meetingType) }}
                     </el-tag>
                 </template>
             </el-table-column>
             <el-table-column label="会议时间/地点" width="160">
                <template #default="{ row }">
                    <div>{{ row.meetingTime }}</div>
                    <div>{{ row.meetingAddr }}</div>
                </template>
            </el-table-column>
                         <el-table-column prop="meetingCreateUserName" label="会议发起人" width="100" align="center" />
            <el-table-column label="飞书链接" width="140" align="center">
                <template #default="{ row }">
                    <template v-if="row.feishuLink">
                        <el-link :href="normalizeLink(row.feishuLink)" target="_blank" type="primary" :underline="false">
                            <el-icon><Link /></el-icon>
                            查看
                        </el-link>
                        <el-divider direction="vertical" />
                        <el-tooltip content="复制链接" placement="top">
                            <el-button link type="primary" @click.stop="handleCopy(row.feishuLink)">
                                <el-icon><DocumentCopy /></el-icon>
                                复制
                            </el-button>
                        </el-tooltip>
                    </template>
                    <span v-else>-</span>
                </template>
            </el-table-column>
                         <el-table-column label="参会人员" width="180">
                 <template #default="{ row }">
                     <!-- 先将字符串按"|"分割成数组 -->
                     <template v-if="typeof row.meetingInUserNames === 'string'">
                         <el-tag v-for="(person, index) in row.meetingInUserNames.split('|').slice(0, 2)" :key="index"
                             size="small" class="participant-tag">
                             {{ person }}
                         </el-tag>
                         <el-popover v-if="row.meetingInUserNames.split('|').length > 2" placement="top" trigger="hover">
                             <template #reference>
                                 <el-tag size="small" type="info">
                                     +{{ row.meetingInUserNames.split('|').length - 2 }}
                                 </el-tag>
                             </template>
                             <div class="participant-popover">
                                 <div v-for="(person, index) in row.meetingInUserNames.split('|').slice(2)" :key="index">
                                     {{ person }}
                                 </div>
                             </div>
                         </el-popover>
                     </template>
                     <!-- 兼容数组形式 -->
                     <template v-else>
                         <el-tag v-for="(person, index) in row.meetingInUserNames.slice(0, 2)" :key="index" size="small"
                             class="participant-tag">
                             {{ person }}
                         </el-tag>
                         <el-popover v-if="row.meetingInUserNames.length > 2" placement="top" trigger="hover">
                             <template #reference>
                                 <el-tag size="small" type="info">
                                     +{{ row.meetingInUserNames.length - 2 }}
                                 </el-tag>
                             </template>
                             <div class="participant-popover">
                                 <div v-for="(person, index) in row.meetingInUserNames.slice(2)" :key="index">
                                     {{ person }}
                                 </div>
                             </div>
                         </el-popover>
                     </template>
                 </template>
             </el-table-column>
             <el-table-column prop="meetingLang" label="会议时长" width="100" align="center">
                <template #default="{ row }">
                    {{ row.meetingLang }} 分钟
                </template>
            </el-table-column>
                         <el-table-column label="会议纪要" width="200">
                 <template #default="{ row }">
                     <el-popover placement="top" trigger="click" width="400">
                         <template #reference>
                             <el-link type="primary" class="notes-btn" :underline="false" title="点击查看纪要">
                                 {{ getNotesPreview(row.meetingNotes, 25) }}
                             </el-link>
                         </template>
                         <div class="notes-content" v-html="row.meetingNotes"></div>
                     </el-popover>
                 </template>
             </el-table-column>
             <el-table-column label="操作" fixed="right" width="120" align="center">
                <template #default="{ row }">
                    <el-link type="primary" :underline="false" @click="handleEdit(row)">
                        <el-icon><Edit /></el-icon>
                        编辑
                    </el-link>
                    <el-divider direction="vertical" />
                    <el-link type="danger" :underline="false" @click="handleDelete(row)">
                        <el-icon><Delete /></el-icon>
                        删除
                    </el-link>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="暂无会议记录" />
            </template>
        </el-table>
        <div class="pagination-container">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" small
                :page-sizes="[10, 20, 30, 50]" :total="total" layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
    <!-- 新增/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="50%" :close-on-click-modal="false">
        <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
            <el-form-item label="会议日期" prop="meetingDate">
                <el-date-picker v-model="form.meetingDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item label="项目名称" prop="itemId">
                <el-select v-model="form.itemId" filterable placeholder="请选择项目">
                    <el-option v-for="item in filteredProjects" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="会议名称" prop="meetingName">
                <el-input v-model="form.meetingName" />
            </el-form-item>
            <el-form-item label="会议类型" prop="meetingType">
                <el-select v-model="form.meetingType" placeholder="请选择会议类型">
                    <el-option v-for="opt in meetingTypeOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="会议时间" prop="meetingTime">
                <el-time-picker v-model="form.meetingTime" format="HH:mm" value-format="HH:mm" placeholder="选择时间" />
            </el-form-item>
            <el-form-item label="会议地点" prop="meetingAddr">
                <el-input v-model="form.meetingAddr" />
            </el-form-item>
            <el-form-item label="会议发起人" prop="meetingCreateUserName">
                <el-select v-model="form.meetingCreateUserName" filterable allow-create default-first-option
                    placeholder="会议发起人">
                    <el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.name" />
                </el-select>
            </el-form-item>
            <el-form-item label="参会人员" prop="meetingInUserNames">
                <el-select v-model="form.meetingInUserNames" multiple filterable allow-create default-first-option
                    placeholder="请选择或输入参会人员">
                    <el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.name" />
                </el-select>
            </el-form-item>
            <el-form-item label="会议时长" prop="meetingLang">
                <el-input-number v-model="form.meetingLang" :min="5" :max="240" /> 分钟
            </el-form-item>
            <el-form-item label="飞书链接" prop="feishuLink">
                <el-input v-model="form.feishuLink" placeholder="请输入飞书链接" />
            </el-form-item>
            <el-form-item label="会议纪要" prop="meetingNotes">
                <EditorMsgVue v-model="form.meetingNotes" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitForm">确定</el-button>
            </span>
        </template>
    </el-dialog>

</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { Plus, Document, Link, DocumentCopy, Edit, Delete } from '@element-plus/icons-vue'
import { FormInstance, FormRules, ElMessage, ElMessageBox } from 'element-plus'
import {
    GetItemList, //获取所有项目
    GetGetOnlineTaskGuarantors,//获取所有人
    CreateMeeting, //创建会议记录
    UpdateMeeting, //更新会议记录
    GetMeetingList, //查询会议记录
    ExportReportMeeting, //导出会议记录
    DeleteMeeting, //删除会议记录
} from "@/api/newDemands/index";
import EditorMsgVue from '@/components/requirement/editorMsg.vue'
const meetingTypeOptions = [
    { label: '未知', value: 0 },
    { label: '需求评审', value: 1 },
    { label: '上线评审', value: 2 },
    { label: '沟通会议', value: 3 },
    { label: '内部会议', value: 4 },
    { label: '故障排查会议', value: 5 },
    { label: '月度会议', value: 6 },
    { label: '复盘会议', value: 7 },
]

const getMeetingTypeLabel = (type: number) => {
    const found = meetingTypeOptions.find(opt => opt.value === type)
    return found ? found.label : '未知'
}

const normalizeLink = (url: string) => {
    if (!url) return ''
    if (/^https?:\/\//i.test(url)) return url
    return `https://${url}`
}

const getMeetingTypeTagType = (type: number) => {
    switch (type) {
        case 1: return 'warning' // 需求评审
        case 2: return 'success' // 上线评审
        case 3: return 'info'    // 沟通会议
        case 4: return ''        // 内部会议
        case 5: return 'danger'  // 故障排查
        case 6: return 'primary' // 月度会议
        case 7: return 'warning' // 复盘会议
        default: return 'info'   // 未知
    }
}

const getAutoCreatedLabel = (isAutoCreated: number) => {
    return isAutoCreated === 1 ? '是' : '否'
}

const getEffectiveLabel = (isEffective: number) => {
    return isEffective === 1 ? '是' : '否'
}

const handleCopy = async (text: string) => {
    const valueToCopy = normalizeLink(text)
    // 优先使用异步剪贴板 API（需安全上下文或 localhost）
    if (navigator.clipboard && window.isSecureContext) {
        try {
            await navigator.clipboard.writeText(valueToCopy)
            ElMessage.success('已复制到剪贴板')
            return
        } catch {}
    }
    // 回退方案：使用隐藏 textarea + execCommand('copy')
    try {
        const textarea = document.createElement('textarea')
        textarea.value = valueToCopy
        textarea.setAttribute('readonly', '')
        textarea.style.position = 'absolute'
        textarea.style.left = '-9999px'
        document.body.appendChild(textarea)
        const selection = document.getSelection()
        const selected = selection ? selection.rangeCount > 0 ? selection.getRangeAt(0) : null : null
        textarea.select()
        document.execCommand('copy')
        document.body.removeChild(textarea)
        if (selected && selection) {
            selection.removeAllRanges()
            selection.addRange(selected)
        }
        ElMessage.success('已复制到剪贴板')
    } catch (e) {
        ElMessage.error('复制失败，请手动复制')
    }
}

// 生成会议纪要预览（去除 HTML，截断）
const getNotesPreview = (html: string, maxLen = 30) => {
    if (!html) return '-'
    const tmp = document.createElement('div')
    tmp.innerHTML = html
    const text = tmp.textContent || tmp.innerText || ''
    return text.length > maxLen ? text.slice(0, maxLen) + '...' : text
}


// 格式化日期为 YYYY-MM-DD
const formatDate = (date: Date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
};
interface MeetingRecord {
    id?: string
    ID?: number
    meetingDate: string
    itemId: number
    meetingName: string
    meetingType: number
    meetingTime: string
    meetingAddr: string
    meetingCreateUserName: string
    userName?: string
    meetingInUserNames: string[] | string
    meetingLang: number
    meetingNotes: string
    feishuLink: string
    isAutoCreated?: number
    isEffective?: number
}
// 获取本月1号和当天日期
const getDefaultDateRange = () => {
    const now = new Date();
    const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
    return [formatDate(firstDay), formatDate(now)];
};
const filterForm = reactive({
    dateRange: getDefaultDateRange(),
    projectName: '',
    meetingName: '',
    organizer: ''
})



const tableData = ref<MeetingRecord[]>([])
const loading = ref(false)

const dialogVisible = ref(false)
const dialogTitle = ref('新增会议')
const formRef = ref<FormInstance>()
const form = reactive<MeetingRecord>({
    id: '',
    meetingDate: '',
    itemId: 23,
    meetingName: '',
    meetingType: 0,
    meetingTime: '',
    meetingAddr: '',
    meetingCreateUserName: '',
    userName: '',
    meetingInUserNames: [],
    meetingLang: 30,
    meetingNotes: '',
    feishuLink: '',
    isAutoCreated: 0,
    isEffective: 1,
})

const rules = reactive<FormRules<MeetingRecord>>({
    meetingDate: [{ required: true, message: '请选择会议日期', trigger: 'change' }],
    itemId: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
    meetingName: [{ required: true, message: '请输入会议名称', trigger: 'blur' }],
    meetingType: [{ required: true, message: '请选择会议类型', trigger: 'change' }],
    meetingTime: [{ required: true, message: '请选择会议时间', trigger: 'change' }],
    meetingAddr: [{ required: true, message: '请输入会议地点', trigger: 'blur' }],
    meetingCreateUserName: [{ required: true, message: '请输入会议发起人', trigger: 'blur' }],
    meetingInUserNames: [{ required: true, message: '请选择参会人员', trigger: 'change' }],
    meetingLang: [{ required: true, message: '请输入会议时长', trigger: 'blur' }],
    meetingNotes: [{ required: true, message: '请输入会议纪要', trigger: 'blur' }],
    feishuLink: [{ required: true, message: '请输入飞书链接', trigger: 'blur' }],
})


const handleFilter = () => {
    currentPage.value = 1
    getMeetingList()
}

const resetFilter = () => {
    filterForm.dateRange = getDefaultDateRange();
    filterForm.projectName = ''
    filterForm.meetingName = ''
    filterForm.organizer = ''
    handleFilter()
}

const handleSizeChange = (val: number) => {
    pageSize.value = val
    getMeetingList()
}

const handleCurrentChange = (val: number) => {
    currentPage.value = val
    getMeetingList()
}


const handleAdd = () => {
    dialogTitle.value = '新增会议'
    resetForm()
    dialogVisible.value = true
    getAllUsers();
    getItemList();
}


// 新增会议记录
const createMeeting = async () => {
    const { data } = await CreateMeeting(form);
    if (data.code == 200) {
        getMeetingList();
        ElMessage.success(data.msg)
        dialogVisible.value = false
    } else {
        ElMessage.error(data.msg)
    }
}




// 编辑会议记录
const handleEdit = (row: MeetingRecord) => {
    console.log(row)
    dialogTitle.value = '编辑会议';
    getAllUsers();
    getItemList();
    Object.assign(form, row);

    // 安全处理 meetingInUserNames
    form.meetingInUserNames = typeof row.meetingInUserNames === 'string'
        ? (row.meetingInUserNames as string).split('|')
        : (row.meetingInUserNames as string[]);

    dialogVisible.value = true;
};


const handleDelete = (row: MeetingRecord) => {
    ElMessageBox.confirm('确认删除该会议记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // 模拟删除操作
        deleteMeeting(row.ID as number)
    }).catch(() => {
        ElMessage.info("取消删除")
    })
}

// 删除会议记录
const deleteMeeting = async (id: number) => {
    const { data } = await DeleteMeeting(id);
    if (data.code == 200) {
        ElMessage.success(data.msg)
        getMeetingList();
    } else {
        ElMessage.error(data.msg)
    }
}



const resetForm = () => {
    form.id = ''
    form.meetingDate = ''
    form.itemId = 23
    form.meetingName = ''
    form.meetingType = 0
    form.meetingTime = ''
    form.meetingAddr = ''
    form.meetingCreateUserName = ''
    form.userName = ''
    form.meetingInUserNames = []
    form.meetingLang = 30
    form.meetingNotes = ''
    form.feishuLink = ''
    form.isAutoCreated = 0
    form.isEffective = 1
}

const submitForm = () => {
    formRef.value?.validate((valid) => {
        if (valid) {
            if (dialogTitle.value === '新增会议') {
                // 新增
                createMeeting();
            } else {
                updateMeeting();
            }
        }
    })
}

// 编辑会议记录
const updateMeeting = async () => {
    const { data } = await UpdateMeeting({
        "id": form.ID,
        "meetingDate": form.meetingDate,
        "itemId": form.itemId,
        "meetingName": form.meetingName,
        "meetingType": form.meetingType,
        "meetingTime": form.meetingTime,
        "meetingAddr": form.meetingAddr,
        "meetingCreateUserName": form.meetingCreateUserName,
        "meetingInUserNames": form.meetingInUserNames,
        "meetingLang": form.meetingLang,
        "meetingNotes": form.meetingNotes,
        "feishuLink": form.feishuLink,
        "isAutoCreated": form.isAutoCreated,
        "isEffective": form.isEffective,
    })
    if (data.code == 200) {
        ElMessage.success(data.msg)
        dialogVisible.value = false
        getMeetingList();
    } else {
        ElMessage.error(data.msg)
    }
}





// 获取所有项目
var filteredProjects = ref();
const getItemList = async () => {
    const { data } = await GetItemList()
    if (data.code == 200) {
        filteredProjects.value = data.data.map((item: any) => ({
            value: item.ID,
            label: item.itemName,
        }))
    } else {
        ElMessage.error(data.msg)
    }
}

// 获取所有用户
interface Staff {
    id: string
    name: string
}
const staffList = ref<Staff[]>()
const getAllUsers = async () => {
    const { data } = await GetGetOnlineTaskGuarantors()
    if (data.code == 200) {
        staffList.value = data.data.map((item: any) => ({
            id: item.uuid,
            name: item.userName,
        }))
    } else {
        ElMessage.error(data.msg)
    }
}

// 查询会议记录
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const getMeetingList = async () => {
    const { data } = await GetMeetingList({
        "page": currentPage.value,
        "pageSize": pageSize.value,
        "meetingBeginTime": filterForm.dateRange[0],
        "meetingEndTime": filterForm.dateRange[1],
        "itemName": filterForm.projectName,
        "meetingCreateUserName": filterForm.meetingName,
        "meetingInUserName": filterForm.organizer,
    })
    if (data.code == 200) {
        tableData.value = data.data.list;
        total.value = data.data.total;
    } else {
        ElMessage.error(data.msg)
    }
}

const exportExcel = async () => {
    try {
        const response = await ExportReportMeeting({
            page: currentPage.value,
            pageSize: pageSize.value,
            meetingBeginTime: filterForm.dateRange[0],
            meetingEndTime: filterForm.dateRange[1],
            itemName: filterForm.projectName,
            meetingCreateUserName: filterForm.meetingName,
            meetingInUserName: filterForm.organizer,
        });

        // 从响应头获取文件名
        const contentDisposition = response.headers['content-disposition'];
        let fileName = '会议记录.xlsx'; // 默认文件名

        if (contentDisposition) {
            // 处理可能的中文文件名（后端需要做URL编码）
            const fileNameMatch = contentDisposition.match(/filename\*?=(?:UTF-8'')?([^;]+)/i);
            if (fileNameMatch && fileNameMatch.length > 1) {
                fileName = decodeURIComponent(fileNameMatch[1]);
            }
        }

        // 创建下载链接
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();

        // 清理
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);

    } catch (error) {
        console.error('导出失败:', error);
    }
}


onMounted(() => {
    getMeetingList();
})


</script>

<style scoped>
.filter-container {
    margin-bottom: 16px;
    padding: 12px 12px 0 12px;
}

.filter-bar {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.filter-bar .filter-form {
    flex: 1;
}

.filter-actions {
    display: flex;
    gap: 8px;
}

.filter-card {
    margin-bottom: 20px;
}


.filter-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-column-gap: 12px;
    grid-row-gap: 12px;
}

.table-card {
    height: calc(100% - 85px);
    padding: 12px 12px 12px 12px;
    overflow: auto;
}

.table-header {
    margin-bottom: 8px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.table-card :deep(.el-table) {
    --el-table-header-bg-color: #fafafa;
    --el-table-border-color: #f0f0f0;
}

.table-card :deep(.el-link.notes-btn) {
    padding: 0;
}

.participant-tag {
    margin-right: 5px;
    margin-bottom: 5px;
}

.participant-popover {
    max-height: 200px;
    overflow-y: auto;
}

.notes-btn {
    padding: 0;
}

.notes-content {
    white-space: pre-wrap;
    word-break: break-word;
}

.pagination-container {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: #fff;
    padding: 8px 12px 0 12px;
    border-top: 1px solid #f0f0f0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.pagination-container :deep(.el-pagination) {
    margin-left: auto;
}

.card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.card + .card {
    margin-top: 12px;
}

.card :deep(.el-form-item) {
    margin-bottom: 12px;
}

.card :deep(.el-select),
.card :deep(.el-input),
.card :deep(.el-date-editor),
.card :deep(.el-input-number) {
    width: 100%;
}

.meeting-name-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.meeting-status-indicators {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.status-tag {
    font-size: 10px;
    height: 18px;
    line-height: 16px;
    padding: 0 6px;
}

.auto-created {
    color: #67c23a;
    font-weight: 600;
    position: relative;
}

.auto-created::before {
    content: "🤖";
    margin-right: 4px;
    font-size: 12px;
}

.not-effective {
    color: #f56c6c;
    font-weight: 500;
    position: relative;
    text-decoration: line-through;
    text-decoration-color: #f56c6c;
    text-decoration-thickness: 2px;
}

.not-effective::before {
    content: "⚠️";
    margin-right: 4px;
    font-size: 12px;
}
</style>
